<#import "/manage/tpl/pageBase.ftl" as page>
<@page.pageBase currentMenu="菜谱管理">

<form action="${basepath}/manage/foodMenu" id="form" method="post" theme="simple" name="form" namespace="/manage">

    <div style="text-align: center;">
        <div id="updateMsg"><font color='red'>${updateMsg!""}</font></div>


        <#if e.id??>
            <button method="update" class="btn btn-success">
                <i class="icon-ok icon-white"></i> 保存
            </button>
        <#else >
            <button method="insert" class="btn btn-success">
                <i class="icon-ok icon-white"></i> 新增
            </button>

        </#if>
    </div>


    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">菜谱信息</a></li>
            <li><a href="#tabs-2">制作步骤</a></li>

        </ul>


        <div id="tabs-1">
            <div class="row form-horizontal" role="form">
                <input type="hidden" value="${e.id!""}" name="id" label="id" id="idd"/>
                <div class="form-group">
                    <label class="col-md-2 control-label">菜谱名称</label>

                    <div class="col-md-10">
                        <input type="text" value="${e.menuname!""}" name="menuname"
                               data-rule="菜谱名称;required;menuname;length[0~44];"
                               size="44" maxlength="44" style="width: 80%;"
                               id="name"/>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">简介</label>

                    <div class="col-md-10">
            <textarea name="description" class="form-control" rows="3" id="description"
                      data-rule="商品简介;required;description;length[4~500];">${e.description!""}</textarea>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">商品配料</label>

                    <div class="col-md-10">
            <textarea name="menuingredient" class="form-control" rows="3" id="menuingredient"
                      data-rule="商品配料;required;menuingredient;length[4~500];">${e.menuingredient!""}</textarea>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">菜谱详情</label>

                    <div class="col-md-10">
            <textarea name="menucontent" class="form-control" rows="3" id="menucontent"
                      data-rule="菜谱详情;required;menucontent;length[4~500];">${e.menucontent!""}</textarea>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label">主图</label>

                    <div class="col-md-10">
                        <input id="uploadify" name="uploadify" value="添加" class="btn btn-warning" type="button"/>
                        <input type="hidden" value="${e.menuheadimage!""}" name="menuheadimage"
                               id="menuheadimage"
                               ccc="imagesInput"
                               style="width: 600px;"
                               />
                        <img style="max-width: 50px;max-height: 50px;" alt="" id="bigImage"
                             src="${systemSetting().imageRootPath}${e.menuheadimage!""}">
                    </div>
                </div>


            </div>

        </div>
        <div id="tabs-2">
            <div>
                <h4>
                    <div class="alert alert-info">步骤列表</div>
                </h4>
                <table class="table table-bordered">
                    <tr>
                        <td colspan="11">
                            <button method="deleteImageByImgPaths" onclick="return deleteImageByImgPaths();"
                                    class="btn btn-primary">删除
                            </button>
                        </td>
                    </tr>
                    <tr style="background-color: #dff0d8">
                        <th width="20"><input type="checkbox" id="firstCheckbox"/></th>
                        <th>步骤列表</th>
                        <!-- 					<th>设为封面</th> -->
                    </tr>
                    <#if e.foodCreateIndexMenus??>
                        <#list e.foodCreateIndexMenus as item>
                            <tr>
                                <td><input type="checkbox"/>
                                    <input type="hidden" name="indexImages" value="${item.indeximage!""}">
                                </td>
                                <td>
                                    <a href="${systemSetting().imageRootPath}${item.indeximage!""}" target="_blank">
                                        <img style="max-width: 100px;max-height: 100px;" alt=""
                                             src="${systemSetting().imageRootPath}${item.indeximage!""}">
                                    </a>
                                    <input name="indexname" style="width: 400px" value="${item.indexname}"/>
                                </td>
                            </tr>
                        </#list>
                    </#if>
                </table>
            </div>
            <br>
            <table class="table table-bordered">
                <tr style="background-color: #dff0d8">
                    <td>新增制作步骤</td>
                </tr>
                <tr>
                    <td>
                        <input id="uploadify1" name="uploadify1" value="添加" class="btn btn-warning" type="button"/></td>
                </tr>
                <tr id="firstTr" style="display:none">
                    <td>
                    <#--<input type="button" name="filemanager" value="浏览图片" class="btn btn-warning"/>-->
                        <img name="img" style="width:50px;height:50px;max-width: 50px;max-height: 50px;">
                        <input type="text" ccc="imagesInput" name="indexImages" style="width: 260px;"
                               readonly="readonly"/>
                        <input name="indexname" style="width: 400px"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>


</form>


<link rel="stylesheet" href="${basepath}/resource/uploadify/uploadify.css" type="text/css">
<script type="text/javascript" src="${basepath}/resource/uploadify/jquery.uploadify.min.js"></script>


<script>
    $(function () {
        $("#tabs").tabs({
            //event: "mouseover"
        });

    });

</script>


<script type="text/javascript">
    $(document).ready(function () {
        var url = '${basepath}/common/uploadify.do?userId=shop';
        //alert(url);
        $("#uploadify").uploadify({
            //'auto'           : false,
            'swf': '${basepath}/resource/uploadify/uploadify.swf',
            'uploader': url,//后台处理的请求
            'queueID': 'fileQueue',//与下面的id对应
            //'queueSizeLimit' :100,
            //'fileTypeDesc'   : 'rar文件或zip文件',
            //'fileTypeExts' 	 : '*.jpg;*.jpg', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
            //'fileTypeExts'   : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc


            //'fileTypeDesc' : '图片文件' , //出现在上传对话框中的文件类型描述
//'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif', //控制可上传文件的扩展名，启用本项时需同时声明filedesc

            'multi': true,
            'buttonText': '本地上传',

            onUploadSuccess: function (file, data, response) {
                //alert("上传成功,data="+data+",file="+file+",response="+response);
//				ajaxLoadImgList();
                data = $.parseJSON(data);
                if (data.error == '1') {
                    alert("上传失败：\n失败原因:" + data.msg);
                } else {
                    $("#bigImage").attr("src", "${systemSetting().imageRootPath}" + data.filePath);
                    $("#menuheadimage").val(data.filePath);
                }
            },
            onUploadError: function (file, errorCode, errorMsg) {
                alert("上传失败,data=" + data + ",file=" + file + ",response=" + response);
            }
        });


        $("#uploadify1").uploadify({
            //'auto'           : false,
            'swf': '${basepath}/resource/uploadify/uploadify.swf',
            'uploader': url,//后台处理的请求
            'queueID': 'fileQueue',//与下面的id对应
            //'queueSizeLimit' :100,
            //'fileTypeDesc'   : 'rar文件或zip文件',
            //'fileTypeExts' 	 : '*.jpg;*.jpg', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
            //'fileTypeExts'   : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc


            //'fileTypeDesc' : '图片文件' , //出现在上传对话框中的文件类型描述
//'fileTypeExts' : '*.jpg;*.bmp;*.png;*.gif', //控制可上传文件的扩展名，启用本项时需同时声明filedesc

            'multi': true,
            'buttonText': '步骤头图',

            onUploadSuccess: function (file, data, response) {
                //alert("上传成功,data="+data+",file="+file+",response="+response);
//				ajaxLoadImgList();
                data = $.parseJSON(data);
                if (data.error == '1') {
                    alert("上传失败：\n失败原因:" + data.msg);
                } else {
                    var $tr = $("#firstTr").clone();
                    $tr.find("img[name=img]").attr("src", "${systemSetting().imageRootPath}" + data.filePath);
                    $tr.find(":input[name=indexImages]").val(data.filePath);
                    $("#firstTr").parent().append($tr);
                    $tr.show();
                }
            },
            onUploadError: function (file, errorCode, errorMsg) {
                alert("上传失败,data=" + data + ",file=" + file + ",response=" + response);
            }
        });


    });


</script>


<script>


    function addTrFunc() {
        var cc = $("#firstTr").clone();
        $("#firstTr").after(cc);

        cc.find("a").show();
    }

    function removeThis(t) {
        $(t).parent().parent().remove();
        return false;
    }
</script>


</@page.pageBase>